<template>
  <vxe-modal
    title="查看中间检查详细"
    v-model="dialogVisible"
    v-if="dialogVisible"
    :loading="loading"
    width="65%" showFooter esc-closable show-zoom resize>

    <div style="height: 52vh; overflow-y: auto;">
      <el-tabs v-model="activeName">
        <!-- 基本资料 -->
        <el-tab-pane name="jbZl" :lazy=true>
          <span slot="label"><i class="el-icon-date"></i> 基本资料</span>
          <div v-if="activeName === 'jbZl'" style="height: 44vh; overflow-y: auto;">
            <el-descriptions class="margin-top" :column="2" size="medium" border
                             :contentStyle="content_style" :labelStyle="label_style">
              <el-descriptions-item>
                <template slot="label">
                  <div class="right-align-label">
                    <i class="el-icon-user"></i>
                    项目名称：
                  </div>
                </template>
                {{ jctbData.xmName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="right-align-label">
                    <i class="el-icon-user"></i>
                    项目编号：
                  </div>
                </template>
                {{ jctbData.xmBh }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="right-align-label">
                    <i class="el-icon-user"></i>
                    年度：
                  </div>
                </template>
                {{ jctbData.nd }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="right-align-label">
                    <i class="el-icon-user"></i>
                    受检计划：
                  </div>
                </template>
                {{ jctbData.sjJh }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="right-align-label">
                    <i class="el-icon-user"></i>
                    承担单位：
                  </div>
                </template>
                {{ jctbData.cdDw }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="right-align-label">
                    <i class="el-icon-user"></i>
                    依托工程：
                  </div>
                </template>
                {{ jctbData.ytGc }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="right-align-label">
                    <i class="el-icon-user"></i>
                    开始时间：
                  </div>
                </template>
                {{ jctbData.ksTime }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="right-align-label">
                    <i class="el-icon-user"></i>
                    结束时间：
                  </div>
                </template>
                {{ jctbData.jsTime }}
              </el-descriptions-item>


            </el-descriptions>
          </div>
        </el-tab-pane>
        <!-- 附件资料 -->
        <el-tab-pane name="fjZl" :lazy=true>
          <span slot="label"><i class="el-icon-date"></i> 附件资料</span>
          <div v-if="activeName === 'fjZl'" style="height: 44vh; ">
            <el-row :gutter="20">
              <el-col :span="4" :xs="24">
                <div class="head-container">
                  <el-tree
                    :data="fileOptions"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="tree"
                    node-key="id"
                    default-expand-all
                    highlight-current
                    @node-click="handleNodeClick"
                  />
                </div>
              </el-col>
              <el-col :span="20" :xs="24">
                <div v-if="jctbFileType === '检查报告'">
                  <el-table height="42vh"
                            :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                            :data="jcBgFiles" ref="zjjcJctbFj">
                    <el-table-column type="selection" width="50" align="center"/>
                    <el-table-column label="序号" align="center" type="index" width="50"/>
                    <el-table-column align="center" label="文件类型" prop="fileType"/>
                    <el-table-column align="center" label="文件名称" prop="fileName" :formatter="getFileNames"/>
                    <el-table-column align="center" label="文件大小" prop="fileSize"/>
                    <el-table-column label="操作" align="center" width="150">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-edit"
                          @click="handleDownload(scope.row)"
                        >下载
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div v-if="jctbFileType === '分局报告'">
                  <el-table height="42vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                            :data="fjBgFiles" ref="zjjcJctbFj">
                    <el-table-column type="selection" width="50" align="center"/>
                    <el-table-column label="序号" align="center" type="index" width="50"/>
                    <el-table-column align="center" label="文件类型" prop="fileType"/>
                    <el-table-column align="center" label="文件名称" prop="fileName" :formatter="getFileNames"/>
                    <el-table-column align="center" label="文件大小" prop="fileSize"/>
                    <el-table-column label="操作" align="center" width="150">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-edit"
                          @click="handleDownload(scope.row)"
                        >下载
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div v-if="jctbFileType === '项目部报告'">
                  <el-table height="42vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                            :data="xmbBgFiles" ref="zjjcJctbFj">
                    <el-table-column type="selection" width="50" align="center"/>
                    <el-table-column label="序号" align="center" type="index" width="50"/>
                    <el-table-column align="center" label="文件类型" prop="fileType"/>
                    <el-table-column align="center" label="文件名称" prop="fileName" :formatter="getFileNames"/>
                    <el-table-column align="center" label="文件大小" prop="fileSize"/>
                    <el-table-column label="操作" align="center" width="150">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-edit"
                          @click="handleDownload(scope.row)"
                        >下载
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div v-if="jctbFileType === '检查意见'">
                  <el-table height="42vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                            :data="jcYjBgFiles" ref="zjjcJctbFj">
                    <el-table-column type="selection" width="50" align="center"/>
                    <el-table-column label="序号" align="center" type="index" width="50"/>
                    <el-table-column align="center" label="文件类型" prop="fileType"/>
                    <el-table-column align="center" label="文件名称" prop="fileName" :formatter="getFileNames"/>
                    <el-table-column align="center" label="文件大小" prop="fileSize"/>
                    <el-table-column label="操作" align="center" width="150">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-edit"
                          @click="handleDownload(scope.row)"
                        >下载
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>

          </div>
        </el-tab-pane>

      </el-tabs>
    </div>


    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button @click="dialogVisible=false">关闭</el-button>
    </div>
  </vxe-modal>
</template>
<script>

import {getJctb} from "@/api/xmgl/zjjc/jctb";

export default {
  name: "JcTbXq", //中间检查填报详情界面
  dicts: ['sys_user_sex', 'rcpt_zc', 'rcpt_sxly', 'rcpt_ryfl', 'rcpt_sf'],
  computed: {
    jcBgFiles() {
      return this.zjjcJctbFjList.filter(file => file.fileType === '检查报告');
    },
    fjBgFiles() {
      return this.zjjcJctbFjList.filter(file => file.fileType === '分局报告');
    },
    xmbBgFiles() {
      return this.zjjcJctbFjList.filter(file => file.fileType === '项目部报告');
    },
    jcYjBgFiles() {
      return this.zjjcJctbFjList.filter(file => file.fileType === '检查意见');
    },
  },
  data() {
    return {
      // 表单参数
      defaultProps: {children: "children", label: "label"},
      fileOptions: [{
        id: 1,
        label: '1.检查报告',
        type: '检查报告',
        children: [{
          id: 2,
          label: '分局报告',
          type: '分局报告',
        }, {
          id: 3,
          label: '项目部报告',
          type: '项目部报告',
        }]
      }, {
        id: 4,
        label: '2.检查意见',
        type: '检查意见',
      }],
      jctbFileType: '检查报告', //附件类型
      activeName: 'jbzl',
      loading: false,
      jctbData: [], //检查填报基本信息
      zjjcJctbFjList: [],//检查填报附件信息
      jctbId: null, //合同主键ID
      beforeData: [],
      beforeDataLoading: false,
      denyTo: null,
      dialogVisible: false,
      rowData: null,
      submitType: "1",//默认同意
      comment: null,//审批意见
      businessData: null,//业务数据
      historyList: [],//历史信息
      content_style: {
        // 解决不对齐的问题
        'width': "400px",
        // 排列第二行
        'word-break': 'break-all',
        // 'background-color': '#f3f7ff'
      },
      label_style: {
        // 解决不对齐的问题
        'width': "100px",
        // 排列第二行
        'word-break': 'break-all',
      },
    };
  },
  created() {
  },
  methods: {
    // 节点单击事件
    handleNodeClick(data) {
      this.jctbFileType = data.type
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 文件下载处理
    handleDownload(row) {
      const resource = row.fileName;
      // 默认方法
      this.$download.resource(resource);
    },
    getFileNames(row) {
      // 从路径中提取文件名
      return row.fileName.split('/').pop(); // 返回文件名部分
    },
    handleOpen(row) {
      this.activeName = 'jbZl'
      this.rowData = row
      this.loading = true;
      this.jctbId = row.jctbId
      this.dialogVisible = true
      this.getJcTbData()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    //获取详情数据
    getJcTbData() {
      const jctbId = this.jctbId
      getJctb(jctbId).then(res => {
        this.jctbData = res.data
        this.zjjcJctbFjList = res.data.zjjcJctbFjList;
      })
    },

  }
};
</script>

